<template>
  <el-carousel :interval="4000" type="card" height="300px">
    <el-carousel-item v-for="(item, index) in tableData" :key="index">
      <img :src="item.img" class="carousel_image_type" />
    </el-carousel-item>
  </el-carousel>
</template>
<script>
import { getBannerData } from "@/api/banner.js";

export default {
  data() {
    return {
      // 存放轮播图数据
      tableData: [],
    };
  },
  methods: {
    /**
     * 请求数据
     */
    fetchData() {
      getBannerData().then((data) => {
        // 将 data.data 赋值给 tableData
        this.tableData = data.data;
        //console.log(this.tableData);
      });
    },
  },

  mounted() {
    this.fetchData();
  },
};
</script>
<style scoped>
.carousel_image_type {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 撑满容器 */
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
